<style>

    #page a{
        margin:0 10px;
        color: #999;
    }
    #page a.active{
        color:#0000ee;
    }
    li{
        list-style: none;
    }
</style>

<div class="bgc-w box box-primary" xmlns:th="http://www.w3.org/1999/xhtml">
    <!--盒子头-->
    <div class="box-header">
        <h3 class="box-title">
            <a href="" class="label label-success" style="padding: 5px;margin-left:5px;">
                <span class="glyphicon glyphicon-refresh"></span> 刷新
            </a>
            <input type="number" placeholder="请输入要删除的id" style="position: absolute;right: 55px;bottom: 6px" id="wbk"><button id="sc" style="position: absolute;right: 0;bottom: 6px">删除</button>
        </h3>

    </div>
    <!--盒子身体-->
    <div class="box-body no-padding">
        <div class="table-responsive">
            <table class="table table-hover">
                <tr>
                    <th scope="col"><span class="paixu interface" id="id">id
                        <li id="idid"></li>
                        </span></th>
                    <th scope="col"><span class="paixu zt" id="lm">类名
                        <li id="lmlm"></li>
                        </span></th>
                    <th scope="col"><span class="paixu thisusername" id="date" style="position: relative;left: -10px">调用时间
                        <li id="sjsj"></li>
                        </span></th>
                    <th scope="col"><span class="paixu thistime" id="lj">请求路径
                        <li id="ljlj"></li>
                        </span></th>
                    <th scope="col"><span class="paixu thisjzh" id="ffm">方法名
                        <li id="ffmffm"></li>
                        </span></th>
                    <th scope="col"><span class="paixu thiszs" id="zt">ip
                        <li id="ipip"></li>
                        </span></th>
                    <th scope="col"><span class="paixu thiswd" id="qx" style="margin-right: 100px">权限
                        <li id="qxqx"></li>
                        </span></th>
                </tr>
            </table>
        </div>
    </div>
    <!--盒子尾-->
    <#--    <#include "../common/pagingmybatis.ftl">-->


    <div class="pagination-nick">
        <div id="page"></div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
    $(function(){
        $(".chakan").click(function(){
            var $information=$(this).parents("td").siblings(".c").find("span").text();
            if( $information!=""){
                parent.changeinformation();
            }
        });
    })

    /*
    * 日志数据
    * */
    $.ajax({
        url: "/jzhws",
        type: "get",
        dataType: "json",
        success: function (data) {
            var pager = {
                pageIndex:1,//当前页码
                pageCount:30,//每页显示多少条数据
                pageMax:0,//数据有一共多少页
            }
            var obj={other:{},value:data};//模拟数据
            $(function(){

//一共有多少页
                pager.pageMax=obj.value.length % pager.pageCount?parseInt(obj.value.length / pager.pageCount)+1:obj.value.length / pager.pageCount;
                var btnBox='';

//循环出多少页
                btnBox+='<a href="javascript:;" data-type="first">首页</span><a href="javascript:;" data-type="nextPage">下一页</a>'
                for(var i=1;i<=pager.pageMax;i++){
                    var j =i;
                    btnBox+='<a href="javascript:;" data-type="'+j+'">'+j+'</a>'
                }
                btnBox+='<a href="javascript:;" data-type="firstPage">上一页</a><input type="number" value="1" class="int" placeholder="1"><button class="btn-yes">确定</button><a href="javascript:;" data-type="last">尾页</a>'
                console.log(pager.pageMax)

                $('#page').html(btnBox)
                $('#page a:nth-child(3)').addClass('active')
                listBox(1);
//页码选中

//点击页数获取数据
                $('#page a').on('click',function(){

                    var num= $(this).attr('data-type')
                    if(!isNaN(num)){
                        listBox(num)
                        pager.pageIndex=Number(num)//unm是字符串，要转为数字类型

                    }else{
                        switch(num){
                            case 'first':listBox(1);//首页
                                pager.pageIndex=1
                                break;
                            case 'last':listBox(pager.pageMax);//尾页
                                pager.pageIndex=pager.pageMax
                                break;
                            case 'nextPage'://下一页
                                if(pager.pageIndex < pager.pageMax){
                                    console.log(typeof(pager.pageIndex))
                                    listBox(pager.pageIndex+1)
                                    pager.pageIndex=pager.pageIndex+1
                                    console.log(pager.pageIndex)
                                }
                                break;
                            case 'firstPage'://上一页
                                if(pager.pageIndex > 1){
                                    listBox(pager.pageIndex-1)
                                    pager.pageIndex=pager.pageIndex-1
                                }
                                break;
                        }
                    }
                    pageNum()
                    $('.int').val(pager.pageIndex);
                })
//填写页数搜索
                $('.btn-yes').on('click',function(){
                    if($('.int').val()){

                        if($('.int').val()<1){
                            listBox(1)
                            pager.pageIndex=1
                            $('.int').val(1)
                        }else if($('.int').val()>pager.pageMax){
                            listBox(pager.pageMax)
                            pager.pageIndex=pager.pageMax
                            $('.int').val(pager.pageMax)
                        }else{
                            listBox($('.int').val())
                            pager.pageIndex=$('.int').val()
                        }
                    }
                    pageNum()
                })
            })

//选中页码
            function pageNum(){
                $('#page a').each(function(){
                    if($(this).attr('data-type')==pager.pageIndex){
                        $(this).addClass('active').siblings().removeClass('active')
                    }
                })
            }
//列表
            function listBox(numIndex){
                var numList=numIndex * pager.pageCount>obj.value.length?obj.value.length:numIndex * pager.pageCount;//循环到的数据
                var numNext=(numIndex-1) * pager.pageCount//从那条数据开始循环
                var idid='';
                var lmlm='';
                var sjsj='';
                var ljlj='';
                var ffmffm='';
                var ipip='';
                var qxqx='';
                var time=new Date();
                var id="";
                var lm="";
                var sj="";
                var lj="";
                var ffm="";
                var ip="";
                var qx="";
                   $.each(data,function (index,element) {
                       element.operateDate=time.toLocaleTimeString();
                       id+=element.id;
                      lm+=element.operateClassName;
                      sj+=element.operateDate;
                      lj+=element.operateUrl;
                      ffm+=element.operateMethodName;
                      ip+=element.operateIp;
                      qx+=element.operateUser;
                  })
                   for (var i=numNext;i<numList;i++){
                   }
                 for(var i=numNext;i<numList;i++){
                     idid+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].id)+'</li>';
                     lmlm+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].operateClassName)+'</li>';
                     sjsj+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].operateDate)+'</li>';
                     ljlj+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].operateUrl)+'</li>';
                     ffmffm+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].operateMethodName)+'</li>';
                     ipip+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].operateIp)+'</li>';
                     qxqx+='<li style="list-style: none">'+'<div>'+JSON.stringify(obj.value[i].operateUser)+'</li>';
                 }
                $('#idid').html(idid);
                 $("#lmlm").html(lmlm);
                 $("#sjsj").html(sjsj);
                 $("#ljlj").html(ljlj);
                 $("#ffmffm").html(ffmffm);
                 $("#ipip").html(ipip);
                 $("#qxqx").html(qxqx);
            }
        },
        error: function () {
            alert("失败!");
        }
    });
    /**
     * 删除日志数据
     */
    $("#sc").click(function () {
        var id=$("#wbk").val();
        alert(id);
        $.ajax({
            url: "/monitordelete",
            type: "get",
            data: {
                id:id
            },
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert("失败!");
            }
        });
    })
</script>